<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>裁判对应的项目</title>
    <script src="js/axios-0.21.0.js"></script>
    <script src="js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }
    </style>
</head>

<body>
<div id="app">
    <el-row>
        <el-col :span="6">
            <span style="font-size:30px">高校运动会管理系统</span>
        </el-col>
        <el-col :span="18">
            <el-menu :default-active="activeIndex" mode="horizontal">
                <el-menu-item index="1">
                    <el-link href="index.html">首页</el-link>
                </el-menu-item>
                <el-submenu index="2">
                    <template slot="title">运动员管理</template>
                    <el-menu-item index="2-1">
                        <el-link
                                :href="'athletesList.html?role='+role">运动员列表
                        </el-link>
                    </el-menu-item>
                    <el-menu-item index="2-2" v-if="role==0">
                        <el-link
                                :href="'athletesAdd.html?role='+role">添加运动员
                        </el-link>
                    </el-menu-item>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">裁判管理</template>
                    <el-menu-item index="3-1">
                        <el-link
                                :href="'judgeList.html?role='+role">裁判列表
                        </el-link>
                    </el-menu-item>
                    <el-menu-item index="3-2" v-if="role==0">
                        <el-link
                                :href="'judgeAdd.html?role='+role">增加裁判
                        </el-link>
                    </el-menu-item>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title">比赛项目管理</template>
                    <el-menu-item index="4-1">
                        <el-link
                                :href="'itemList.html?role='+role">比赛项目列表
                        </el-link>
                    </el-menu-item>
                    <el-menu-item index="4-2" v-if="role==0">
                        <el-link
                                :href="'itemAdd.html?role='+role">增加比赛项目
                        </el-link>
                    </el-menu-item>
                </el-submenu>
                <el-submenu index="5">
                    <template slot="title">场地管理</template>
                    <el-menu-item index="5-1">
                        <el-link
                                :href="'GroundList.html?role='+role">场地列表
                        </el-link>
                    </el-menu-item>
                    <el-menu-item index="5-2" v-if="role==0">
                        <el-link
                                :href="'GroundAdd.html?role='+role">增加场地
                        </el-link>
                    </el-menu-item>
                </el-submenu>
                <el-submenu index="6">
                    <template slot="title">留言管理</template>
                    <el-menu-item index="6-1">
                        <el-link
                                :href="'commentList.html?role='+role">留言查询
                        </el-link>
                    </el-menu-item>
                </el-submenu>
                <el-submenu index="7">
                    <template slot="title">报名管理</template>
                    <el-menu-item index="7-1">
                        <el-link
                                :href="'registerList.html?role='+role">报名查询
                        </el-link>
                    </el-menu-item>
                    <el-menu-item index="7-2" v-if="role==2">
                        <el-link
                                :href="'registerAdd.html?role='+role">报名
                        </el-link>
                    </el-menu-item>
                    <el-menu-item index="7-3" v-if="role==0 || role ==1">
                        <el-link
                                :href="'registerListAll.html?role='+role">报名审批
                        </el-link>
                    </el-menu-item>
                </el-submenu>
                <el-submenu index="8">
                    <template slot="title">成绩管理</template>
                    <el-menu-item index="8-1">
                        <el-link @click="dialogAthletes=true">查询成绩</el-link>
                    </el-menu-item>
                    <el-menu-item index="8-2" v-if="role==0 || role ==1">
                        <el-link @click="dialogItems=true">录入成绩</el-link>
                    </el-menu-item>
                    <el-menu-item index="8-3" v-if="role==2">
                        <el-link @click="dialogItems=true">根据项目查询成绩</el-link>
                    </el-menu-item>
                </el-submenu>
                <el-submenu index="9">
                    <template slot="title">个人中心</template>
                    <el-menu-item index="9-1" @click="logout">退出</el-menu-item>
                    <el-menu-item index="9-2" @click="userEdit(id)">编辑</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-col>
    </el-row>
    <el-row :gutter="10" style="margin-bottom: 10px">
        <el-col :span="6">
            <el-button type="primary" @click="dialogVisible = true" v-if="role==0 || role == 1">添加项目</el-button>
        </el-col>
    </el-row>
    <el-table :data="judgeItemList" border stripe @selection-change="handleSelectionChange" style="width: 100%">
        <el-table-column header-align="center" align="center" prop="judgeName" label="名字">
        </el-table-column>
        <el-table-column header-align="center" align="center" prop="itemName" label="项目">
        </el-table-column>
        <el-table-column header-align="center" align="center" prop="date" label="时间">
        </el-table-column>
        <el-table-column header-align="center" align="center" prop="location" label="地点">
        </el-table-column>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="删除" v-if="role==0">
            <template slot-scope="scope">
                <el-button type="danger" size="mini" @click="del(scope.row.itemId,scope.row.judgeId)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible" title="添加数据">
        <el-form ref="form1" :model="judgeItem" label-width="100px" :rules="rules">
            <el-form-item label="教练Id" prop="judgeId">
                <el-input v-model.number="judgeItem.judgeId"></el-input>
            </el-form-item>
            <el-form-item label="项目" prop="itemName">
                <el-input v-model="judgeItem.itemName"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="addJudgeItem">添加</el-button>
        </div>
    </el-dialog>

    <!--    查询成绩-->
    <el-dialog title="提示" :visible.sync="dialogAthletes" width="30%">
        <el-form ref="form" :model="scaaa" label-width="80px">
            <el-form-item label="运动员名">
                <el-input v-model="scaaa.athletesName" placeholder="请输入运动员名"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="showByAthletesName">查询</el-button>
                <el-button @click="dialogAthletes=false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="dialogItems" width="30%">
        <el-form ref="form" :model="scaaa" label-width="80px">
            <el-form-item label="项目名">
                <el-input v-model="scaaa.itemName" placeholder="请输入项目名"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="showByItemName">查询</el-button>
                <el-button @click="dialogItems=false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
<script type="text/javascript">
    const app = new Vue({
        el: "#app",
        data: {
            id: -1,
            activeIndex: "3-2",
            judgeItemList: [],
            ids: [],
            judgeId: "",
            itemId: "",
            dialogAthletes: false,
            dialogItems: false,
            scaaa: { // 为了在顶部的成绩管理弹出对话框
                athletesName: "",
                itemName: ""
            },
            dialogVisible: false,
            judgeItem: {
                judgeId: "",
                itemName: ""
            },
            rules: {
                itemName: [
                    {required: true, message: '项目不能为空', trigger: 'blur'},
                    {pattern: /^[a-zA-Z\u4e00-\u9fa5]+$/, message: '项目名名必须为字符', trigger: 'blur'}
                ],
                judgeId: [
                    {required: true, message: '裁判Id不能为空', trigger: 'blur'},
                    {type: 'number', message: '请输入数字', trigger: 'blur'}
                    // 使用 type 属性指定输入框类型为数字
                ]
            },
            role: ""
        },
        methods: {
            showByAthletesName() {
                location.href = "sc111.html?athletesName=" + this.scaaa.athletesName + "&role=" + this.role
            },
            userEdit(id) {
                location.href = "athletesUpdate.html?id=" + id + "&role=" + this.role;
            },
            showByItemName() {
                location.href = "sc222.html?itemName=" + this.scaaa.itemName + "&role=" + this.role
            },
            logout() {
                axios.get('http://localhost:8080/user/logout')
                    .then(resp => {
                        if (resp.data.message == 'success') {
                            alert(resp.data.message)
                            location.href = 'login.html';
                        } else {
                            alert(resp.data.message)
                        }
                    }).catch(error => console.log(error))
            },
            getSelection() {
                //console.log('--------------------------------')
                //console.log(this.ids);
                this.$confirm('您确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    axios.delete(`http://localhost:8080/judge/deletejudge`, {data: this.ids}).then(resp => {
                        if (resp.data.status == 'success') {
                            //消息框  message
                            this.$message({
                                type: 'success',
                                showClose: true,//属性  取消自动关闭  默认自动关闭  时间为3s
                                message: resp.data.message,
                            });
                            this.showjudge(1, 3)
                        } else {
                            this.$message({
                                type: 'error',
                                showClose: true,
                                message: resp.data.message
                            })
                        }
                    }).catch(error => console.log(error))
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleSelectionChange(judges) {
                //console.log(val);//获取到当前选中的行
                this.ids = judges.map(judge => judge.id)
            },
            showjudge(judgeId) {
                //alert(this.pageNum+" - " + this.pageSize)
                this.judgeId = judgeId;
                axios.get(`http://localhost:8080/judge/getJudgeItemList/${this.judgeId}`)
                    .then(resp => {
                        this.judgeItemList = resp.data.judgeItemList
                    }).catch(error => console.log(error))
            },
            del(itemId, judgeId) {
                this.itemId = itemId;
                this.judgeId = judgeId;
                this.$confirm('您确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    axios.delete(`http://localhost:8080/judge/deleteJudgeItem/${this.judgeId}/${this.itemId}`)
                        .then(resp => {
                            if (resp.data.message == 'success') {
                                //消息框  message
                                this.$message({
                                    type: 'success',
                                    showClose: true,//属性  取消自动关闭  默认自动关闭  时间为3s
                                    message: resp.data.message,
                                });
                                this.showjudge(this.judgeId)
                            } else {
                                this.$message({
                                    type: 'error',
                                    showClose: true,
                                    message: resp.data.message
                                })
                            }
                        }).catch(error => console.log(error))
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            addJudgeItem() {
                this.$refs.form1.validate(valid => {
                    if (valid) {
                        // 表单验证通过，执行添加数据的操作
                        // 这里可以调用 API 将数据提交到后端
                        axios.post('/judge/addJudgeItem', this.judgeItem).then(response => {
                            if (response.data.message === 'success') {
                                this.$message({
                                    type: 'success',
                                    message: '添加成功'
                                });
                                this.dialogVisible = false; // 关闭对话框
                                this.showjudge(this.judgeId)
                            } else if (response.data.message === 'failed') {
                                this.$message({
                                    type: 'error',
                                    message: '该裁判已经有了对应的项目'
                                });
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: '没有这个项目'
                                });
                            }
                        });
                    }
                })
            }
        },
        created() {
            let queryString = window.location.search;
            let urlParams = new URLSearchParams(queryString);
            this.role = urlParams.get('role');
            this.judgeId = urlParams.get('id');
            this.showjudge(this.judgeId)
            axios.get('user/getUser').then(res => {
                if (this.role === '0') {
                    this.id = res.data.user.adminId
                } else if (this.role === '1') {
                    this.id = res.data.user.judgeId
                } else if (this.role === '2') {
                    this.id = res.data.user.athletesId
                }
            })
        }
    });
</script>
</body>

</html>